<template>
    <x-page class="homepage" tab-bar="首页" :hidden-header="true">
        <template slot="title">商机列表</template>
        <template slot="left"><span></span></template>
        <template slot="main">
            <home-resume></home-resume>
            <home-statistic></home-statistic>
            <section class="button-group">
                <v-touch v-for="(item,index) in buttonGroup" :key="index"
                class="button-group-item" @tap="handleClickGroupBtn(item)">
                    <svg-icon class="item-icon" :style="{color: item.color}" :icon-class="item.icon"></svg-icon>
                    <div class="item-text">
                        {{item.text}}
                    </div>
                </v-touch>
            </section>
            <!--<section class="latest-section">-->
                <!--<div class="section-title">最近跟进</div>-->
                <!--<customer-card class="customer-card" name="客户名称">-->
                <!--</customer-card>-->
            <!--</section>-->
        </template>
    </x-page>
</template>

<script>

import SvgIcon from 'src/components/SvgIcon';
import HomeResume from './sub/HomeResume';
import XPage from '../../components/XPage';
import HomeStatistic from './sub/HomeStatistic';
export default {
    components: { HomeStatistic, XPage, HomeResume, SvgIcon },
    data() {
        return {
            buttonGroup: [
                {
                    icon: 'icon-tianjia',
                    color: '#FF875F',
                    text: '商机录入',
                    url: '/notes/0?edit=1'
                },
                {
                    icon: 'icon-jindutiaoqiandai',
                    color: '#AE5FFF',
                    text: '公海商机',
                    url: '/notes'
                },
                {
                    icon: 'icon-ai-user',
                    text: '我的客户',
                    color: '#7DB042',
                    url: '/opportunities/my'
                },
                {
                    icon: 'icon-wenbenbianjitianchong',
                    text: '写跟进',
                    color: '#3592FF',
                    url: '/opportunities/writeFollow'
                },
                {
                    icon: 'icon-rankfill',
                    text: '业绩管理',
                    color: '#FF5F5F',
                    url: '/performances/my'
                },
                {
                    icon: 'icon-erweima',
                    text: '推广二维码',
                    color: '#FFD500',
                    url: '/myQrCode'
                },

            ]
        };
    },
    methods: {
        handleClickGroupBtn(item) {
            if (item.url) {
                this.$router.push(item.url);
            }
        }
    }
};
</script>
<style lang="scss">
    .homepage {
        color: #515151;
        .button-group {
            margin-top: 0.12rem;
            height:4.8rem;
            background: white;
            display: flex;
            flex-wrap: wrap;
            .button-group-item {
                box-sizing: border-box;
                padding-top: 0.52rem;
                width: 2.5rem;
                height:2.4rem;
                display: flex;
                flex-direction: column;
                align-items: center;
                overflow: hidden;
                .item-icon {
                    width:0.96rem;
                    height:0.96rem;
                }
                .item-text {
                    margin-top: 0.24rem;
                    font-size:0.28rem;
                }
            }
        }
        .latest-section {
            margin-top: 0.12rem;
            background:white;
            .section-title {
                box-sizing: border-box;
                padding-left:0.32rem;
                height:0.6rem;
                line-height:0.8rem;
                color: #0076FF;
            }
        }

    }
</style>
